<template>
  <div class="c_saving">
    <div class="minh100 ft16 new-balck2">
      <div class="mauto wt1300">
        <div class="flex alcenter">
          <img src="../assets/images/c-cover.da76d1a.png" class="wt300 ht300" />
          <div class="flex1 ml40">
            <div class="ft50 bold white">{{$t('Cloud mining')}}</div>
            <div class="coverTag mt40">
              <p class="mb20">{{$t('Cloud mining tips')}}</p>
              <p>{{$t('*Please')}}</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="mauto wt1200 ptb20">
          <div>
            <a
              class="sgbtn plr5 ptb5 radius10 black el-link el-link--default is-underline"
              style="float: right"
              @click="$router.push({ path: '/stakingOrder' })"
            >
              <span class="el-link--inner">{{$t('Subscription List')}}</span>
            </a>
          </div>
        </div>
      </div>
      <div class="mauto pt20 wt1200 pb80">
        <div class="flex wraps alcenter between">
          <div
            class="savingCard"
            v-for="(item, index) in savingList"
            :key="index"
          >
            <div class="flex">
              <img :src="item.icon" srcset="https://tragpt.xyz/file/cex/ywk.jpg,../assets/b9b690dc07355254f9b701a488318786.jpg" class="wt80 ht80" />
              <div class="ml20">
                <div class="white ft20 bold">{{ item.name }}</div>
                <div class="savingCardTag">{{ item.tag || "USDT" }}</div>
                <div class="white ft16">
                  {{$t('Expected daily production')}}:<span class="pl10 new-main-text">
                    {{ item.rate }}
                  </span>
                </div>
              </div>
            </div>
            <div class="flex mt20 between gray7 gt16">
              <div>
                {{$t('term')}}：<span class="white bold">{{ item.days }}/{{$t('day')}}</span>
              </div>
              <div>
                <div class="tr">
                  {{$t('Cloud mining')}}：<span class="white">{{ item.minNum }}</span>
                </div>
                <div class="tr mt10">
                  {{$t('Maximum subscription')}}：<span class="white">
                    {{ item.maxNum }}
                  </span>
                </div>
              </div>
            </div>
            <div class="savingProgressBar posRelt mt20">
              <div class="savingRunBar abstort"></div>
            </div>
            <div class="flex jsend">
              <div
                class="sgbtn plr5 ptb5 black radius10"
                @click="stakingDetailHandler(item)"
              >
                {{$t('Subscription application')}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cloudList } from "@/api/cloud";
import storage from "store";
export default {
  data() {
    return {
      savingList: [],
    };
  },
  mounted() {
    cloudList().then((resp) => {
      this.savingList = resp.data;
    });
  },
  methods: {

    stakingDetailHandler(item) {
      storage.set("stakingDetails", item);
      this.$router.push({
        path: "/stakingDetail",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.c_saving {
  width: 100%;
  // height: 100%;
}
.el-divider__text,
.el-link {
  font-weight: 500;
  font-size: 14px;
}
.el-divider__text,
.el-link {
  font-weight: 500;
  font-size: 14px;
}
.el-link,
.el-transfer-panel__filter .el-icon-circle-close {
  cursor: pointer;
}
.sgbtn {
  background: #ffc800;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.el-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: 0;
  // padding: 0;
}
.savingCard {
  width: 560px;
  min-width: 560px;
  background: #000;
  padding: 30px;
  border-radius: 30px;
  margin: 20px;
  font-family: Lato;
}
.savingProgressBar {
  width: 100%;
  height: 2px;
  background: #5f5f5f;
  margin-bottom: 20px;
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font-size: 10px;
}
.savingRunBar {
  border-radius: 20px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(70%, #e69500),
    color-stop(30%, #ffc800)
  );
  background: linear-gradient(90deg, #e69500 70%, #ffc800 0);
  -webkit-box-shadow: 0 0 10px #ffc800;
  box-shadow: 0 0 10px #ffc800;
  background-size: 50px;
  height: 6px;
  font-size: 8px;
  color: #000;
  text-align: right;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-animation: flash 0.9s linear infinite;
  animation: flash 0.9s linear infinite;
}
.coverTag {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 50px;
  color: #afafaf;
}
</style>
